<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>web share</title>
  </head>
  <body>
    <button id="btn">web share</button>

    <script>
      const btnDom = document.querySelector('#btn')

      btnDom.addEventListener('click', () => {
        if (navigator.share) {
          // todo
          console.log('web share')
          navigator
            .share({
              title: 'WebShare API',
              url: 'https://codepen.io/ayoisaiah/pen/YbNazJ',
              text: 'I am learing web share api.',
            })
            .then(() => {
              console.log('thanks for your sharing.')
            })
            .catch(err => {
              console.log('sharing error: ' + err)
            })
        } else {
          console.log('can not use navigator.share')
        }
      })
    </script>
  </body>
</html>
